<template>
  <div class="root">
    <p-dialog :visible="visible" @close="$emit('close')">
      <h2>离线激活</h2>
      <el-alert type="success" :closable="false" style="margin-bottom:10px;">设备ID请在需要激活的电脑上查看，右上角名称->查看授权</el-alert>

      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="激活码" prop="code">
          <el-input v-model="form.code"></el-input>
        </el-form-item>
        <el-form-item label="设备ID" prop="deviceId">
          <el-input v-model="form.deviceId"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button :disabled="loading" size="mini" type="primary" @click="activeAction()">激活</el-button>
          <el-button size="mini" @click="$emit('close')">取消</el-button>
        </el-form-item>
      </el-form>
    </p-dialog>
    <active-download :visible="downloadVisible" @close="downloadVisible = false" :id="id"></active-download>
  </div>
</template>

<script>
import api from "@/utils/api";
import ActiveDownload from "@/components/order/ActiveDownload";

export default {
  name: "OfflineActive",
  components: {ActiveDownload},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    code: {
      type: String,
      default: null
    }
  },
  watch: {
    code(val) {
      this.form.code = val;
    }
  },
  data() {
    return {
      loading: false,
      downloadVisible: false,
      id: null,
      form: {
        code: this.code,
        deviceId: ''
      }, rules: {
        code: [{
          required: true,
          message: '请输入激活码',
          trigger: 'blur'
        }],
        deviceId: [{
          required: true,
          message: '请输入设备ID',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    activeAction() {
      //提交表单
      let self = this;
      this.$refs.form.validate((valid) => {
        console.log(valid)
        if (valid) {
          this.loading = true;
          api.orderOfflineActive(this.form.deviceId, this.form.code).then(res => {
            if (res.code === 1) {
              this.id = res.rid;
              this.$message.success(res.msg);
              this.$emit('refresh');
              this.$emit('close');
              this.downloadVisible = true;
            }
          }).finally(() => self.loading = false);
        }
      });
    }
  }
}
</script>

<style scoped>

</style>
